
import { useEffect, useState } from 'react'
import { Input, Table, Space, } from 'antd';
import { useSelector, useDispatch, Link, SpecModelState } from "umi";
import { deletes, getSpecList, seach } from '@/services'
import styles from './index.less'
import {
  AppstoreOutlined,
  DeleteOutlined,
  EditOutlined,
  SearchOutlined,
  SyncOutlined
} from '@ant-design/icons';



const prodTag = () => {
  const { specList } = useSelector((state: { spec: SpecModelState }) => state.spec);
  const dispatch = useDispatch()
  const [speclist, setSpecList] = useState()
  const [state1, stestate] = useState([]);
  useEffect(() => {
    getSpecList().then((res: any) => {
      console.log(res.records);
      setSpecList(res.records)
    })
  }, [])

  const [isFlag, setIsFlag] = useState(true);

  function changeFlag() {
    console.log(123);
    setIsFlag(!isFlag)
    console.log(isFlag);
  }
  function refresh() {
    console.log('请求数据');

  }
  //搜索
  const search = async () => {
    console.log(document.getElementsByClassName('inp')[0].value)
    const list = {
      current: 1,
      size: 10,
      title: document.getElementsByClassName('inp')[0].value
    };
    const data = await seach(list);
    stestate(data.records);
    console.log(state1, 'state1');
  }
  //清空
  const clean = async () => {
    if (document.getElementsByClassName('inp')[0].value != '') {
      document.getElementsByClassName('inp')[0].value=''
      const list = {
        current: 1,
        size: 10,
        title: document.getElementsByClassName('inp')[0].value
      };
      const data = await seach(list);
      stestate(data.records);
      document.getElementsByClassName('inp')[0].value=''
    }
  }
  const columns = [
    {
      title: '序号',
      dataIndex: 'propId',
      key: 'propId',
      align: 'center'
    },
    {
      title: '属性名称',
      dataIndex: 'propName',
      key: 'propName',
      align: 'center'
    },
    {
      title: '属性值',
      dataIndex: 'prodPropValues',
      key: 'prodPropValues',
      render: (text: any, record: any, index: any) => {
        return (
          <div className={styles.list}>
            {
              text.map((item: any) => {
                return (
                  <span>{item.propValue}</span>
                )
              })
            }
          </div>
        )
      }
    },
    {
      title: '操作',
      key: 'action',
      render: (text: any, record: any) => (
        <Space size="middle">
          <div className={styles.revise}>
            <EditOutlined />
            <span>&nbsp;修改</span>
          </div>
          <div className={styles.remove}>
            <DeleteOutlined />
            <span onClick={async () => {
              if (window.confirm('是否删除？')) {

                await deletes(record.propId);
                getSpecList().then((res: any) => {
                  console.log(res.records);
                  setSpecList(res.records)
                })
              }
            }}>&nbsp;删除</span>
          </div>
        </Space>
      ),
    },
  ];
  let data = speclist
  return (
    <div className={styles.prodTag}>
      <div className={isFlag === true ? styles.serach : styles.serachNull}>
        <div className={styles.serachName}>
          <span>标签名称</span><Input placeholder="标签名称" className='inp' />
        </div>
        <div className={styles.serachitem}>
          <SearchOutlined />
          <span onClick={search}>&nbsp;搜 索</span>
        </div>
        <div className={styles.empty}>
          <DeleteOutlined />
          <span onClick={clean}>&nbsp;清 空</span>
        </div>
      </div>
      <div className={styles.add}>
        <button>新增</button>
        <div className={styles.icons}>
          <div onClick={refresh}><SyncOutlined /></div>
          <div><AppstoreOutlined /></div>
          <div onClick={changeFlag}><SearchOutlined /></div>
        </div>
      </div>
      <div className={styles.from}>
        <Table columns={columns} dataSource={state1.length > 0 ? state1 : data} />
      </div>
    </div>
  );
}
export default prodTag